<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" class="form-container" :model="page.query" ref="queryForm">
        <div class="search">
          <el-form-item label="品牌名称" prop="name">
            <el-input
                placeholder="请输入品牌名称"
                prefix-icon="el-icon-search"
                v-model="page.query.name"
            >
            </el-input>
          </el-form-item>
          <el-button icon="el-icon-search" type="success" @click="search">搜索</el-button>
          <el-button icon="el-icon-refresh" type="success" class="reset_btn" @click="reset" >重置</el-button>
        </div>
        <div class="func">
          <el-button icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
        </div>
      </el-form>

    </el-card>
    <el-table :data="brands"

              style="width: 100%"
    >

      <el-table-column
          prop="name"
          label="品牌名称"
      >

      </el-table-column>

      <el-table-column
          prop="code"
          label="品牌编码"
      ></el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"

      >
      </el-table-column>
      <el-table-column
          prop="createBy"
          label="创建人"

      >
      </el-table-column>
      <el-table-column
          label="操作"

      >
        <template v-slot="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(scope.row.id)"></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <page @handlePage="handlePage" :page="page"></page>
    <el-dialog :title="title" :visible.sync="isShow" width="40%">
      <el-form :model="form" inline ref="brandForm">
        <el-form-item label="品牌名称" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Page from '@/components/page/index.vue'
import { deleteBrand, editBrand, getBrand, saveBrand } from '@/api/brand'

export default {
  name: 'brand',
  data() {
    return {
      title: '',
      isShow: false,
      form: {
        name: ''
      },
      page: {
        current: 1,
        size: 3,
        total: 0,
        query: {
          name: ''
        }
      }
    }
  },
  computed: {
    brands() {
      this.page.total = this.$store.state.brand.brands.total
      return this.$store.state.brand.brands.records
    }
  },
  mounted() {
    this.reloadBrand()
  },
  components: {
    Page
  },
  methods: {
    reset() {
      this.page.current = 1
      this.$refs.queryForm.resetFields()
      this.reloadBrand()

    },
    handleEdit(id) {
      this.title = '编辑品牌'
      this.isShow = true
      getBrand(id).then(res => {
        this.form = { ...res }
        this.form.createTime = ''
        this.form.lastUpdateTime = ''
      })
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该品牌, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteBrand(id).then(() => {
          this.reloadBrand()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    reloadBrand(reset = true) {
      if (reset) {
        this.page.current = 1
      }
      return new Promise((resolve, reject) => {
        this.$store.dispatch('brand/pageBrand', this.page).then(() => {
          resolve()
        }).catch((err) => {
          reject(err)

        })
      })

    },
    handleAdd() {
      this.title = '添加品牌'
      this.isShow = true
      this.form.id = ''
    },
    search() {
      this.reloadBrand().then(() => {
        this.$refs.queryForm.resetFields()
      })
    },
    saveOrUpdate() {
      if (this.form.id) {
        editBrand(this.form).then(res => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.resetData()
        })

      } else {
        saveBrand(this.form).then(res => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.resetData()
        })
      }

    },
    resetData() {
      this.$refs.brandForm.resetFields()
      this.isShow = false
      this.title = ''
      this.reloadBrand()
    },
    cancel() {
      this.isShow = false
      this.title = ''
      this.$refs.brandForm.resetFields()

    },
    handlePage(flag) {
      this.reloadBrand(flag)
    }
  }
}
</script>

<style scoped>
.form-container {
  display: flex;
  justify-content: space-between;
}
.reset_btn {
  background-color: #722ed1;
  border: 1px solid #722ed1;
}
.reset_btn:hover {
  background-color: #7849b7;
  border: 1px solid #7849b7;
}
.reset_btn:focus {
  background-color: #7849b7;
  border: 1px solid #7849b7;
}
</style>
